@extends('layout.admin.index')

@section('content')
<style>
	  .inputPic{ cursor:pointer;opacity:0;ilter:alpha(opacity=0);width:100%;height:100%;position: absolute;top: 0;left: 51;z-index: 9;}
</style>
	<div class="panel admin-panel margin-top">
	<div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>添加内容</strong></div>
	<div class="body-content">
	    <form method="post" class="form-x sub" action="/admin/inventory/insert" enctype="multipart/form-data">
			<!-- 隐藏域发送csrf保护 -->
			{{ csrf_field() }}
			<!-- csrf保护结束 -->
			<!-- 隐藏发送商品id -->
			<input type="hidden" name="goods_id" value="{{ $goods_id }}">
			<!-- 商品型号结束 -->
	      	<div class="form-group">
		      	<div class="label">
		          	<label>商品型号: </label>
		        </div>
		        <div class="field">
          			<div class="input w50">{{ $goods_model }}</div>
          			<div class="tips"></div>
       			 </div>
	      	</div>
			<!-- 商品型号结束 -->
				<div class="form-group">
			        <div class="label">
			          <label>图片：</label>
			        </div>
			        <div class="field">
				        
				        <input type="file" onchange="info(this,'#picinfo1')" class="button bg-blue margin-left inputPic" style="float:left;" name="pic1">
				       	<div style="float:left;"><img src="/web/images/public.png" id="picinfo1" width="51" height="51" style="border:2px solid red;"></div>
				       	
				       	<div class="tipss">图片尺寸：1500*1500</div>
			        </div>
			    </div>
			<!-- 商品价格 -->
	      	<div class="form-group">
		      	<div class="label">
		          	<label>子类商品价格: </label>
		        </div>
		        <div class="field">
          			<input type="text" class="input w50 goods_price" value="" name="goods_price"/><span style="float:left; margin:10px;"></span>
          			<div class="tips"></div>
       			 </div>
	      	</div>
	      	<!-- 商品价格结束 -->  	
			
			

	      	<!-- 商品库存 -->
	      	<div class="form-group">
		      	<div class="label">
		          	<label>子类商品库存: </label>
		        </div>
		        <div class="field">
          			<input type="text" class="input w50 goods_inventory" value="" name="goods_inventory"/><span style="float:left; margin:10px;"></span>
          			<div class="tips"></div>
       			 </div>
	      	</div>
	      	<!-- 商品库存结束 -->
			
			<!-- 子类商品配置 -->
				
				<!-- 选择cpu配置 -->
		        <if condition="$iscid eq 1">
				
		        <div class="form-group a" id="jilianContainer">
			        <div class="label">
			        	<label>cpu:</label>
			        </div>
		          	<div class="field">
			            <select name="sele[]" class="input w50 cpu">
			                <option value="1">请选择</option>
			                <option value="25">CPU</option>
			               
			            </select>
			            <div class="tips"></div>
			            <div class="tips"></div>
		        	</div>

				</div>
		        </if>
		        <!-- 结束CPU配置 -->

		        <!-- 选择内存配置 -->
		        <div class="form-group">
		        </div>
				<if condition="$iscid eq 1">
				
		        <div class="form-group">
			        <div class="label">
			        	<label>内存：</label>
			        </div>
		          	<div class="field">
			            <select name="sele[]" class="input w50 sele">
			               <option value="1">请选择</option>
			               <option value="26">内存</option>
			            </select>
			            <div class="tips"></div>
		        	</div>
				</div>
		        </if>
				<!-- 选择硬盘配置结束 -->
				<br>

				<!-- 选择显卡配置 -->
		        <if condition="$iscid eq 1">
		        

		        <br>
				<!-- 选择硬盘配置 -->
				<if condition="$iscid eq 1">
				
		        <div class="form-group">
			        <div class="label">
			        	<label>硬盘：</label>
			        </div>
		          	<div class="field">
			            <select name="sele[]" class="input w50 sele">
			                <option value="1">请选择</option>
			                <option value="35">硬盘</option>
			            </select>
			            <div class="tips"></div>
		        	</div>
				</div>
		        </if>
				<!-- 选择硬盘配置结束 -->
				<br>

				<!-- 选择主板配置 -->
				
				<if condition="$iscid eq 1">
				
		        <div class="form-group">
			        <div class="label">
			        	<label>主板：</label>
			        </div>
		          	<div class="field">
			            <select name="sele[]" class="input w50 sele">
			                <option value="1">请选择</option>
			               <option value="28">主板</option>
			            </select>
			            <div class="tips"></div>
		        	</div>
				</div>
		        </if>
				<!-- 选择主板配置结束 -->
				<br>
		        
		        <!-- 其他配置 -->
				<div class="form-group">
		            <div class="label">
		            	<label>其他配置：</label>
		            </div>
		            <div class="field" style="padding-top:8px;"> 
			            系统 <input id="ishome"  type="text" name="goods_config_other_system" value="无"/>
			            电池 <input id="isvouch"  type="text" name="goods_config_other_battery" value="无"/>
			            前摄像头 <input id="istop"  type="text" name="goods_config_other_camera_f" value="无"/> 
			            后摄像头 <input id="istop"  type="text" name="goods_config_other_camera_b" value="无"/> 
		          	</div>
		          	<div class="field" style="padding-top:8px;"> 
		          	指纹识别: <input type="radio" name="goods_config_other_finger" value="1">前置识别
			            	  <input type="radio" name="goods_config_other_finger" value="2">后置识别
			            	  <input type="radio" name="goods_config_other_finger" value="3" checked>不支持
		    
		        	</div>
		        </div>
				<!-- 其他配置结束 -->

			<!-- 子类商品配置结束 -->

		    <div class="form-group">
			    <div class="label">
			     	<label></label>
			    </div>
			    <div class="field">
			      	<button class="button bg-main icon-check-square-o nosubmit" type="submit"> 添加</button>
			    </div>
		    </div>

		    
	    </form>
	  </div>
</div>

<script>
	// 当改变下拉表单时调用ajax函数
nosele = null;
$('.nosele').change(function(){
	nosele = 1;
})
$('.nosele').blur(function (){
	nosele = null;
})

$('select').change(ajax);

	
	function ajax(){
		if(nosele == 1){
			return false;
		}
		// 初始化清除下拉菜单自定义的类
		$('select').removeClass('as');
		// 获取当前选择下拉菜单的value值
		var l = $(this).val();
		// 拼接一个类路径
		var a = 'a'+l;
		// 给当前下拉菜单添加一个as类
		$(this).addClass('as');

		
		// alert(l);
		// 发送ajax请求
		$.ajax({
			type:"GET",
			url:"/admin/datalist/ajax?id="+l,
			dataType:"json",
			success: function(msg){
				// 在当前下拉列表后追加一个下拉列表
				$('.as').after('<select class="'+a+' input w50" name="sele[]"><option value="1">请选择</option></select>');
				console.log(msg);
				if(msg.length  == 0) {
					// 如果ajax返回一个空数组则移除下拉列表后的下拉列表
					$('.as').nextAll().remove();
					
					return false;
				}
				$.each(msg,function(k,v){
					// 向下拉列表中追加数据
					$("<option value='"+v.id+"'>"+v.goods_config_cate+"</option>").appendTo('.'+a);
					$('.as').removeClass('as');
				})
				$('.'+a+'').change(ajax);
						
					},
			
			async:"false"
		})
}


// 判断是否填写价格
$('.goods_price').focus(function() {
	$(this).next().css('color','gray');
	$(this).next().text(' *必填 请填写商品价格,如:2000');
})
$('.goods_price').blur(function() {
	var reg = /^[0-9]+$/; 
	goods_price = reg.test($(this).val())
	if(!goods_price){
		$(this).next().css('color','red');
		$(this).next().html('<i class="icol-cancel"></i> 只能填写数字');

	}else{
		$(this).next().html('<i class="icol-accept"></i>');
	}
	
	if($(this).val() == '') {
		$(this).next().css('color','red');
		$(this).next().html('<i class="icol-cancel"></i> 请填写商品价格');
	}
})


// 判断是否填写库存
$('.goods_inventory').focus(function() {
	$(this).next().css('color','gray');
	$(this).next().text(' *必填 请填写商品库存,如:100');
})
$('.goods_inventory').blur(function() {
	var reg = /^[0-9]+$/; 
	goods_inventory = reg.test($(this).val())
	if(!goods_price){
		$(this).next().css('color','red');
		$(this).next().html('<i class="icol-cancel"></i> 只能填写数字');

	}else{
		$(this).next().html('<i class="icol-accept"></i>')
	}
	
	if($(this).val() == '') {
		$(this).next().css('color','red');
		$(this).next().html('<i class="icol-cancel"></i> 请填写商品库存');
	}
})
// 提交时判断
$('.sub').submit(function(){

	// return goods_price && goods_color && goods_inventory;
})

/**
           * 无刷新头像
           * 
           * @param       object          file          获取file所有属性
           * @param       object          reader        读取文件属性
           * @param       int             file.files[0]['size']  获取上传文件大小
           * @param       string          file.files[0]['type']
           * @将文件的路径赋予img src属性
           */
          // 获取input属性
          function info(file,a){
          	console.log(file.files[0]);
          	console.log(a)
            // 判断是否获取成功
            if(file.files && file.files[0]){
         		
                  var reader = new FileReader();
                  // 将每次读取的路径赋予img src
                  reader.onload = function(evt){  
                     $(a).attr('src',evt.target.result)
                  };
                   reader.readAsDataURL(file.files[0]);
                   
            }
          }
</script>
@endsection